<template>
  <page-container>
    <!-- <search-form
      v-model="searchForm"
      :searchColumns="searchColumns"
      :searchOptions="searchOptions"
      @on-search="handleSearch">
      <template v-slot:right-menu>
        <el-button
          type="primary"
          @click="handleUpload"
          style="margin-bottom: 10px">
          上传版本
        </el-button>
      </template>
    </search-form> -->

    <el-button
      type="primary"
      @click="handleUpload"
      style="margin-bottom: 20px">
      上传版本
    </el-button>

    <avue-table
      :loading="loading"
      :page="page"
      :dataList="dataList"
      :tableColumns="tableColumns"
      @onPageChange="onPageChange">
      <template v-slot:menu="{ row }">
        <el-button
          type="text"
          @click="handleRollback(row)">
          回退到此版本
        </el-button>
      </template>
    </avue-table>

    <UploadFile
      ref="uploadKeyRef"
      @refresh="handleSearch" />
  </page-container>
</template>

<script>
import UploadFile from './components/upload-file.vue'
import tableMixins from '@/mixins/table'
import { allFormColumns } from './composes/dialog-config'
import { searchColumns, tableColumns } from './composes/table-config'
import { getVersionList, addVersion, rollbackVersion } from '@/api/permission'
import { mapGetters } from 'vuex'

export default {
  mixins: [tableMixins],
  components: { UploadFile },
  data() {
    return {
      showForm: false,
      searchOptions: {
        menuSpan: 4,
        showSearch: false,
      },
      dialogForm: {
        ImagePath: [],
        TutorialVideoPath: [],
      },
      searchForm: {},
      categoryList: [],
      platformList: [],
    }
  },
  computed: {
    // addColumns,
    tableColumns,
    searchColumns,
    allFormColumns,
    ...mapGetters(['businessList', 'channelSdkCascader', 'channelSdkTypeList', 'userList']),
  },

  methods: {
    // 注册定义查询方法，用于tableMixins(必须，不然就自己写查询逻辑)
    fetchMethod: getVersionList,

    // 点击上传关键词
    handleUpload() {
      this.$refs.uploadKeyRef.show = true
    },

    async getList() {
      this.dataList = []

      const searchParams = this.formatSearch()
      const queryParams = {
        ...searchParams,
        page: this.page.currentPage,
        page_size: this.page.pageSize,
      }

      this.loading = true

      const { data } = await this.fetchMethod(queryParams)
      console.log(data)
      this.dataList = data?.List ?? []
      this.page.total = data?.TotalCnt ?? 0
      this.summaryData = data ?? {}

      this.loading = false
    },

    // 点击回滚
    handleRollback(row) {
      this.$confirm('确定回退到此版本吗？', '版本回退', {
        confirmButtonText: this.$t('buttons.confirm'),
        cancelButtonText: this.$t('buttons.cancel'),
        type: 'warning',
      })
        .then(async () => {
          const resData = await rollbackVersion(row.Id)
          if (resData.code === 0) {
            this.$message.success('成功回退到此版本')
          }
        })
        .catch(() => {})
    },

    // 参数处理
    formatSearch() {
      return this.searchForm
    },

    // 监听上传文件
    async onUploadChange(e) {
      const file = e.target.files[0]
      const { code } = await addVersion(file)
      if (code == 0) {
        this.getList()
      }
      e.target.value = ''
    },
  },
  mounted() {
    this.handleSearch()
  },
}
</script>
